<template>
    <view>
        <view class="m-pointList">
            <view class="m-pointList-border_box" v-for="(item,index) in detailList" :key="index">
<!--                <view><image class="m-pointList-pic" :src="item.image"/></view>-->
                <view class="m-pointList-part_1">
                    <view class="m-pointList-detail">{{item.show_name}}</view>
                    <view class="m-pointList-time">{{item.created_at}}</view>
                </view>
                <view class="m-pointList-part_2">
                    <view v-if="item.type===1" class="m-pointList-point type-color-1">{{item.show_integral}}</view>
                    <view v-else class="m-pointList-point type-color" >{{item.show_integral}}</view>
                    <view class="m-pointList-point_type">{{item.type_name}}</view>
                </view>
            </view>
<!--            <view class="m-pointList-border_box">-->
<!--                <view><image class="m-pointList-pic" src="../static/img/money.png"/></view>-->
<!--                <view class="m-pointList-part_1">-->
<!--                    <view class="m-pointList-detail">韩国进口花束自然青葡萄洗洁剂sdfasdfasdfasdf</view>-->
<!--                    <view class="m-pointList-time">2020-06-05 15:01:21</view>-->
<!--                </view>-->
<!--                <view class="m-pointList-part_2">-->
<!--                    <view class="m-pointList-point type-color">+100.00</view>-->
<!--                    <view class="m-pointList-point_type">现金转积分 </view>-->
<!--                </view>-->
<!--            </view>-->

        </view>
    </view>
</template>

<script>
    export default{
        name:'m-pointList',
        props: {
            detailList: Array,
        },
        data(){
            return{

            }
        },
    }
</script>

<style scoped lang="less">
    .m-pointList{
        margin-top: 40rpx;
        /*text-align: center;*/
        /*margin-left: 40rpx;*/
    }
    .m-pointList-part_1{
        margin-left: 20rpx;
        width: 70%;
        margin-top: 10rpx;
    }
    .m-pointList-part_2{
        width: 30%;
        text-align: right;
        /*margin-right: 20rpx;*/
        margin-top: 10rpx;
    }
    .m-pointList-border_box{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 90%;
        border-bottom: solid #c0c0c0 0.5px;
        padding-bottom: 10rpx;
        margin-left: 5%;
        margin-top: 25rpx;
    }
    .m-pointList-pic{
        width: 84rpx;
        height: 85rpx;
    }
    .m-pointList-detail{
        font-size: 30rpx;
        width: 411rpx;
        height: 44rpx;
        overflow: hidden;
        white-space: nowrap;
        text-overflow:ellipsis;
    }
    .m-pointList-time{
        margin-top: 15rpx;
        font-size: 24rpx;
        color: #999999;
    }
    .m-pointList-point{
        font-size: 28rpx;
        /*width: 100rpx;*/
        /*height: 25rpx;*/
    }
    .m-pointList-point_type{
        padding-top: 5rpx;
        margin-top: 15rpx;
        font-size: 24rpx;
        color: #999999;
        /*width: 50rpx;*/
        /*height: 25rpx;*/
    }
    .type-color{
        color: #f1a12d;
    }
    .type-color-1{
        color: green;
    }
</style>

